<script setup lang="ts">
import {useMemberStore} from '@/stores'
import {ref, onMounted} from 'vue'
import {postLoginWxMinAPI, getUserCashAmountAPI, getUserInfoByIdAPI} from '@/api/account'
import type {userItem} from '@/types/member'
import {useRoleStore} from '@/stores'
import {busListStore} from '@/stores'
import {baseURL} from '@/utils/http'

const memberStore = useMemberStore()
const roleStore = useRoleStore()
const busStore = busListStore()
let profile = ref<userItem>({})

// 获取个人信息
const getMemberProfileData = async () => {
  if (memberStore.profile) {
    const res = await getUserInfoByIdAPI(memberStore.profile.userId)
    profile.value = res.data
  } else {
    const rescode = await wx.login()
    const { code } = rescode
    const loginrRes = await postLoginWxMinAPI(code)
    profile.value = loginrRes.data.appUser
  }
  if (profile.value.avatar?.includes('http')) {
    console.log(profile)
  } else {
    profile.value.avatar = baseURL + profile.value.avatar
  }
}

// 待提现金额
const cashAmout = ref<string>()
const getUserCashAmount = async () => {
  if (profile.value.userId) {
    const res = await getUserCashAmountAPI(profile.value.userId)
    cashAmout.value = res.data as string
  }
}

onMounted(async () => {
  if (memberStore.profile && memberStore.profile.userId) {
    await getMemberProfileData()
    getUserCashAmount()
  } else {
    uni.navigateTo({ url: '/pages/login/login' })
  }
})

const onLoginOut = () => {
  memberStore.clearProfile()
  roleStore.clearRoles()
  busStore.clearBus()
  uni.showToast({icon: 'success', title: '退出登录成功'})
  setTimeout(() => {
    uni.redirectTo({url: '/pages/index/index'})
  }, 1000)
}

const gotoRole = () => {
  if (roleStore.roles.includes('bus_user')) {
    uni.redirectTo({url: '/pages/business/business'})
  } else if (roleStore.roles.includes('agent_user')) {
    uni.redirectTo({url: '/pages/indexAgent/indexAgent'})
  } else if (roleStore.roles.includes('bus_agent')) {
    uni.redirectTo({url: '/pages/indexBusinessAgent/indexBusinessAgent'})
  } else if (roleStore.roles.includes('delivery_user')) {
    uni.redirectTo({url: '/pages/carry/carry'})
  }
}

const gotoWithdraw = () => {
  uni.redirectTo({url: '/pages/withdrawal/withdrawal'})
}
</script>

<template>
  <view>
    <!-- 个人资料 -->
    <view class="profile">
      <view class="overview">
        <navigator url="/pages/profile/profile" hover-class="none">
          <image class="avatar" mode="aspectFill" :src="profile.avatar ? profile.avatar : ''"></image>
        </navigator>
        <view class="meta">
          <view class="nickname">{{profile.nickname || profile.name || profile.username}}</view>
          <navigator class="extra" url="/pages/profile/profile" hover-class="none">
            <text class="update">更新头像昵称</text>
          </navigator>
        </view>
        <view class="role" v-if="roleStore.roles" @tap="gotoRole">进入角色</view>
      </view>
    </view>
    <!-- <view class="tixian">
      <text class="uni-h6">待提现金额：{{ cashAmout || 0 }}元</text>
      <button type="primary" size="mini" @tap="gotoWithdraw">提现</button>
    </view> -->
    <!-- <view class="saoma_num">
      <text>扫码次数：85468 次</text>
      <text>中奖次数：468 次</text>
    </view> -->
  </view>
  <view class="nav_list">

    <!-- <navigator class="nav" url="/pages/withdrawalList/withdrawalList">
      <uni-icons type="wallet" color="#26b99c" size="18" />
      <text class="name">我的提现明细</text>
      <uni-icons type="right" color="#999" size="18" />
    </navigator> -->
    <navigator class="nav" url="/pages/attes/attes">
      <uni-icons type="auth" color="#26b99c" size="18"/>
      <text class="name">实名认证</text>
      <uni-tag
        :text="profile.nameStatus == 1 ? '待认证' : '已认证'"
        size="small"
        :type="profile.nameStatus == 1 ? 'default' : 'success'"
      />
      <uni-icons type="right" color="#999" size="18"/>
    </navigator>
    <navigator class="nav" url="/pages/myScan/myScan">
      <uni-icons type="scan" color="#26b99c" size="18"/>
      <text class="name">我的扫码</text>
      <uni-icons type="right" color="#999" size="18"/>
    </navigator>
    <navigator class="nav" url="/pages/newsDetail/newsDetail?id=1752653080813432834">
      <uni-icons type="color" color="#26b99c" size="18"/>
      <text class="name">操作说明</text>
      <uni-icons type="right" color="#999" size="18"/>
    </navigator>
    <navigator class="nav" url="/pages/suggest/suggest">
      <uni-icons type="compose" color="#26b99c" size="18"/>
      <text class="name">意见建议</text>
      <uni-icons type="right" color="#999" size="18"/>
    </navigator>
  </view>
  <view class="btn">
    <button type="warn" size="default" @tap="onLoginOut">退出登录</button>
  </view>
</template>

<style lang="scss">
page {
  height: 100vh;
  overflow: hidden;
  background-color: #f7f7f8;
  position: relative;
  display: flex;
  flex-direction: column;
}

.nav_list {
  .nav {
    padding: 12px 20px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;

    .name {
      flex: 1;
      padding-left: 10px;
      font-size: 28rpx;
    }
  }
}

.btn {
  padding: 20px;
  position: absolute;
  width: 100%;
  bottom: 60px;

  button {
    font-size: 14px;
    line-height: 2.4;
    width: 150px;
  }
}

/* 用户信息 */
.profile {
  padding: 40rpx 0;
  position: relative;
  background-color: rgb(0, 206, 170);

  .overview {
    display: flex;
    height: 120rpx;
    padding: 0 36rpx;
    color: #fff;
  }

  .avatar {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    background-color: #eee;
  }

  .gray {
    filter: grayscale(100%);
  }

  .meta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    line-height: 30rpx;
    padding: 16rpx 0;
    margin-left: 20rpx;
  }

  .nickname {
    max-width: 350rpx;
    margin-bottom: 16rpx;
    font-size: 30rpx;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .extra {
    display: flex;
    font-size: 20rpx;
  }

  .tips {
    font-size: 22rpx;
  }

  .update {
    padding: 3rpx 10rpx 1rpx;
    color: rgba(255, 255, 255, 0.8);
    border: 1rpx solid rgba(255, 255, 255, 0.8);
    margin-right: 10rpx;
    border-radius: 30rpx;
  }

  .settings {
    position: absolute;
    bottom: 30rpx;
    right: 40rpx;
    font-size: 30rpx;
    color: #fff;
  }
}

.title {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-left: 15px;
  height: 40px;
  background-color: #ddd;
  font-weight: normal;
  color: #666;
  font-size: 14px;
  color: #666;
}

.tixian {
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgb(0, 206, 170);
  border-top: 1px solid rgb(174, 218, 210);
}

.saoma_num {
  display: flex;
  padding: 15px 20px;
  font-size: 28rpx;
  justify-content: space-between;
}

.tixian text {
  color: #fff;
  font-size: 30rpx;
}

.tixian button {
  margin: 0;
}

.role {
  font-size: 14px;
  flex: 1;
  text-align: right;
  padding-top: 20px;
}
</style>
